<template>
    <div>
      <h1>父子组件通信</h1>
      <whore :girls="girls" @happy="doThing"></whore>
      <h2>Slot</h2>
      <Poster >{{info}}
      <template #one>一等美女白</template>
      <template #three>三等美女骚</template>
      </Poster>
      <h3>Slot-scope</h3>
      <Star>
        <template slot-scope="myStar">
          <ul>
            <li v-for="(star,index) in myStar.girls" :key="index">{{star}}</li>
          </ul>
        </template>
      </Star>
      <h1 style="color:#53bb13d9">你好坏啊！都点人家{{count}}次了，要对人家负责哟！</h1>
      <img :src="pic" @click="()=>this.count++"/>
      <hr>

    </div>
</template>

<script>
  import breast from "@/assets/girl/61.jpg";


  import Whore from "./whore.vue";

  import Poster from "./poster";
  import Star from './star'
    export default {
        name: "event",
      components: {Poster, Whore,Star},
      data() {
         return{
           pic:breast,
           count:0,
           girls:['柳如是','高圆圆','陈圆圆'],
           msg:"",
           info:''
         }
      },
      methods:{
        doThing(e){
          console.log("Happy time with",e)
          let msgs=['大众女神，值得拥有！','相信你的眼光，极致的享受','倾国倾城，物有所值！']
          let n=Math.floor(Math.random() * 3) ;
          this.$message.info({
            // title:'春宵一刻值千金',
            content: e+" "+msgs[n]
          })

          this.msg=e
        }
      },
      watch:{
        count(newVal, oldVal) {

          if(newVal>=20){
            this.$eventBus.$emit("bigNews","太残暴了，20次的凌辱，报警！")
            console.log("Watch count",newVal)
          }
        },
        msg(newVal,oldVal){
          this.info='新人笑：'+newVal+":春宵一刻值千金！"+" 旧人哭："+oldVal
          console.log("watch msg",this.info)
        }
      }

      // data:{
      //     pic:breast,
      //   count:99
      // }
    }
</script>

<style scoped>
  div{
    text-align: center;
  }
img{
  width: 600px;
}
</style>
